<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./after.css">
</head>

<body>
    <div class="box1"></div>
    <div class="box2">
        <div class="left">
            <div class="l-box"></div>
            <div class="l-box1"></div>
            <div class="l-box2"></div>
        </div>
        <div class="right">
            <iframe src="" name='local'></iframe>
        </div>
    </div>
    <script src="../template-web.js"></script>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <script type="text/html" id="box">
       <img src="{{img}}" alt="">
       <h3>{{text}}</h3>
       <button  type="button" class="reit">{{btn}}</button>
    </script>
    <script type="text/html" id="left-box">
     菜单列表
    </script>
    <script type="text/html" id="left-box1">
        <h3>我是谁</h3>
                <ul>
                    <li><a href="./模板学生列表.html" target="local"> 我是我</a></li>
                    <li><a href="../11月3日/jq放大镜.html" target="local"> 我不是你 </a></li>
                    <li><a href="../11月2日/jq选项卡.html" target="local"> 你不是她</a> </li>
                    <li><a href="../11月1日/点赞.html" target="local"> 我不是她</a> </li>
                    <li><a href="" target="local"> 他也不是她</a> </li>
                    <li><a href="" target="local"> 它也不是她</a> </li>
                </ul>
       </script>  
       <script type="text/html" id="left-box2">
        <h3>你是谁</h3>
        <ul>
            <li><a  href='#' target="local"> 你不是你</a></li>
            <li><a  href='#' target="local"> 他不是他 </a></li>
            <li><a  href='#' target="local"> 你也不是她</a> </li>
            <li><a  href='#' target="local"> 你也不是她</a> </li>
            <li><a  href='#' target="local"> 你也不是她</a> </li>
            <li><a  href='#' target="local"> 你也不是她</a> </li>
        </ul>
       </script>
    <script>
        let data = {
            img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.SVJS_bkI3PRKBaQwes2YZAHaIV?w=197&h=222&c=7&r=0&o=5&pid=1.7',
            text: '欢迎来到后台管理',
            btn: '退出登录'
        }
        let htmlText = template('box', data)
        document.querySelector('.box1').innerHTML = htmlText
        let htmlText1 = template('left-box', data)
        document.querySelector('.l-box').innerHTML = htmlText1
        let htmlText2 = template('left-box1', data)
        document.querySelector('.l-box1').innerHTML = htmlText2
        let htmlText3 = template('left-box2', data)
        document.querySelector('.l-box2').innerHTML = htmlText3
    </script>
    <script src="./after.js"></script>
</body>

</html>